<template>
    <div class="sub-filter" v-if="!filterLoading">
        <div class="item">
            <div class="head">品牌：</div>
            <div class="body">
                <a href="javascript:;" v-for="item in filterData.brands" :key="item.id"
                   :class="{active:item.id===filterData.selectedBrand}" @click="changeBrand(item.id)">{{item.name}}</a>
            </div>
        </div>

        <div class="item" v-for="item in filterData.saleProperties" :key="item.id">
            <div class="head">{{item.name}}：</div>
            <div class="body">
                <a href="javascript:;" v-for="attr in item.properties" :key="attr.id"
                   :class="{active:attr.id===item.selectedProp}" @click="changeAttr(item,attr.id)">{{attr.name}}</a>
            </div>
        </div>
    </div>
    <div v-else class="sub-filter">
        <el-skeleton :rows="6" animated/>
    </div>

</template>

<script>
    import {findSubCategoryFilter} from "@/api/category";

    export default {
        name: "SubFilter",
        data() {
            return {
                filterData: {},
                filterLoading: false,

            }
        },
        methods: {
            async findSubCategoryFilter() {
                this.filterLoading = true
                const {result} = await findSubCategoryFilter(this.$route.params.id)
                result.selectedBrand = null
                result.brands.unshift({id: null, name: '全部'})

                result.saleProperties.forEach(p => {
                    p.selectedProp = null
                    p.properties.unshift({id: null, name: '全部'})
                })
                this.filterData = result
                this.filterLoading = false
            },
            getFilterParams() {
                const filterParams = {}
                const attrs = []
                filterParams.brandId = this.filterData.selectedBrand
                this.filterData.saleProperties.forEach(p => {
                    const attr = p.properties.find(attr => attr.id === p.selectedProp)
                    if (attr && attr.id !== null) {
                        attrs.push({groupName: p.name, propertyName: attr.name})
                    }
                })
                if (attrs.length) filterParams.attrs = attrs
                return filterParams
            },
            changeBrand(brandId) {
                if (this.filterData.selectedBrand === brandId) return
                this.filterData.selectedBrand = brandId
                this.$emit('filter-change', this.getFilterParams())
            },
            changeAttr(p, attrId) {
                if (p.selectedProp === attrId) return
                p.selectedProp = attrId
                this.$emit('filter-change', this.getFilterParams())
            }

        },
        watch: {
            '$route.params.id': {
                handler(newVal) {
                    if (newVal && this.$route.path === ('/category/sub/' + newVal)) {
                        this.findSubCategoryFilter()
                    }
                },
                immediate: true
            }
        }
    }
</script>

<style scoped lang="less">
    .sub-filter {
        background: #fff;
        padding: 25px;

        .item {
            display: flex;
            line-height: 40px;

            .head {
                width: 80px;
                color: #999;
            }

            .body {
                flex: 1;

                a {
                    margin-right: 36px;
                    transition: all .3s;
                    display: inline-block;

                    &.active,
                    &:hover {
                        color: @xtxColor;
                    }
                }
            }
        }
    }

</style>